<template>
  <div class="search-container">
    <div v-if="showHeaderBtn" class="flex-between">
      <div class="flex-between">
        <el-button
          v-for="(item,$index) in permissionBtn(innerButtonData)"
          :key="$index"
          :type="item.type"
          @click="emitEvent($event,item.action)"
        >{{ item.label }}
        </el-button>
        <div v-if="permissionBtn(innerButtonData).length===0" v-html="nbsp" />
        <el-dropdown v-if="innerDropDownBtn && innerDropDownBtn.length>0" placement="bottom-start" @command="handleCommand">
          <el-button size="mini">
            {{ $t('common.moreOperations') }}<i class="el-icon-arrow-down el-icon-arrow-down-query el-icon--right" />
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="(item, $otherIndex) in innerDropDownBtn" :key="$otherIndex" :command="item">{{ item.label }}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <div class="el-query">
          <el-input v-model="searchData.value" :placeholder="searchData.label" @change="search">
            <el-button slot="append" type="primary" @click="search">
              <i class="el-icon-search" /> {{ $t('common.query') }}
            </el-button>
          </el-input>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SimpleDataSelect',
  props: {
    searchData: {
      type: Object,
      default: () => {
        return {
          key: 'key',
          label: this.$t('common.enter'),
          value: null
        }
      }
    },
    buttonData: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      size: 'medium',
      nbsp: '&nbsp;',
      showHeaderBtn: true,
      // buttonData [{action : 按钮点击方式,label : 显示的按钮值}]
      innerButtonData: {
        type: Array,
        default: () => {
          return []
        }
      },
      innerDropDownBtn: {
        type: Array,
        default: () => {
          return []
        }
      }
    }
  },
  computed: {
    permissionBtn() {
      // eslint-disable-next-line no-unused-vars
      var that = this
      // eslint-disable-next-line eqeqeq
      return (rows) => {
        return rows.filter((item) => {
          return that.$checkBtnPermission(item.permission)
        })
      }
    }
  },
  watch: {
    buttonData: {
      handler(val) {
        const that = this
        this.innerButtonData = []
        this.innerDropDownBtn = []
        val.forEach((value, index) => {
          value.type = value.type ? value.type : 'primary'
          if (index > 1) that.innerDropDownBtn.push(value)
          else that.innerButtonData.push(value)
        })
      },
      deep: true
    }
  },
  created() {
    const that = this
    this.innerButtonData = []
    this.innerDropDownBtn = []
    this.buttonData.forEach((value, index) => {
      value.type = value.type ? value.type : 'primary'
      if (index > 1) that.innerDropDownBtn.push(value)
      else that.innerButtonData.push(value)
    })
  },
  mounted() {
    // this.search();
  },
  methods: {
    // 查询
    search() {
      const search = {}
      search[this.searchData.key] = this.searchData.value
      this.$emit('return-search', search)
    },
    handleCommand(item, instance) {
      if (typeof item.action === 'function') item.action()
    },
    emitEvent($event, click, data) {
      if (typeof click === 'function') click(data, $event)
    },
    focus(name) {
      this.$refs[name].focus()
    },
    blur(name) {
      this.$refs[name].focus()
    },
    select(name) {
      this.$refs[name].focus()
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
